<template>
	<view class="pages">
		<view class="company" v-for="(item,index) in company" :key="index">
			<view class="name">
				<text>公司名称：</text>
				<text>{{item.name}}</text>
			</view>
			<view class="signature">
				<text>重点简介：</text>
				<text>{{item.signature}}</text>
			</view>
			<view class="imgList">
				<view v-for="(it,i) in item.img" :key="i" @tap="previewImage(i,index)">
					<img :src="it" alt="" class="img" />
				</view>
			</view>
			<view class="user">
				<text>联系人：</text>
				<text>{{item.user}}</text>
			</view>
			<view class="phone">
				<text>电话：</text>
				<text>{{item.phone}}</text>
			</view>
			<view class="address">
				<text>地址：</text>
				<text>{{item.address}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				company: [{
						name: "东莞圣域科技有限公司",
						signature: "【友星缘APP】友星缘是以各市县镇形成区域圈子，同时整合各个社会圈子里的产业链资源人脉的社交平台。",
						img: [
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg'
						],
						user: "易先生",
						phone: 18826877879,
						address: "东莞长安企汇中心B栋4楼"
					},
					{
						name: "联合商业大厦",
						signature: "东莞长安联合商业大厦，纯办公写字楼",
						img: [
							'https://file.dgyxy.com/resource/bgDefault.png',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg',
							'https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg'
						],
						user: "卢小姐",
						phone: 15820819870,
						address: "东莞长安联合商业大厦"
					}
				]
			};
		},
		methods: {
			// 图片预览
			previewImage(i, index) {
				uni.previewImage({
					urls: this.company[index].img,
					current: i
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #dedede !important;
	}

	/* #ifdef MP-WEIXIN */
	.pages {
		background-color: #dedede !important;
	}

	/* #endif */

	.company {
		background-color: #fff;
		padding: 24rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 24rpx;
		margin-bottom: 20rpx;

		.name,
		.user,
		.phone,
		.address {
			border-bottom: 1rpx solid #e7e7e7;
			padding-bottom: 24rpx;
			font-weight: bold;
		}

		.user {
			text:last-child {
				margin-left: 28rpx;
			}
		}

		.signature {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			justify-content: center;
			border-bottom: 1rpx solid #e7e7e7;
			padding-bottom: 24rpx;

			text:first-child {
				font-weight: bold;
			}

			text:last-child {
				color: #7e7e7e;
				font-size: 28rpx;
			}
		}

		.imgList {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200rpx, 1fr));
			text-align: center;

			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
			}
		}

		.phone,
		.address {
			text:last-child {
				margin-left: 62rpx;
			}
		}
	}
</style>